<template>
  <!--系统图 视图部分-->
  <div style="display: inline-block;min-width: 100%">
    <div class="search-bar">
      <Row>
        <Col span="12">
          <Menu mode="horizontal" @on-select="tabSelect" active-name="electric">
            <MenuItem name="electric">
              <i class="monitor icon-electric"></i>
              <span>电</span>
            </MenuItem>
            <MenuItem name="water">
              <i class="monitor icon-water"></i>
              <span>水</span>
            </MenuItem>
            <MenuItem name="coolFlow">
              <i class="monitor icon-cool-flow"></i>
              <span>冷量</span>
            </MenuItem>
            <MenuItem name="gas">
              <i class="monitor icon-gas"></i>
              <span>燃气</span>
            </MenuItem>
            <MenuItem name="compressionAir">
              <i class="monitor icon-compression-air"></i>
              <span>压缩空气</span>
            </MenuItem>
          </Menu>
          <span class="line"></span>
        </Col>
        <Col span="10">
          <div style="float: right;margin-right: 10px;">
            <label class="form-label">空间：</label>
            <Select v-model="params.factory" style="width:200px" @on-change="factoryChange">
              <Option v-for="item in spaceList" :value="item.label" :key="item.id">{{ item.label }}</Option>
            </Select>
          </div>
        </Col>
        <Col span="25" style="text-align: right;padding-right: 15px;">
          <Button type="primary" @click="jumpEdit(null)">新增系统图</Button>
        </Col>
      </Row>
    </div>
    <div class="picture">
      <Row :gutter="6" style="padding-left: 5px;">
        <Col span="6" class="imgCard" v-for="(im, index) in imgs" :key="index" @click.native="jumpEdit(im)">
          <ImgListCard :info="im"></ImgListCard>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
  import ImgListCard from './ImgListCard'

  export default {
    name: 'SysView',
    props: ['edit'],
    components: {ImgListCard},
    mounted: function () {
      this.getSpaceList()
      this.doLoadOperation()
    },
    data: function () {
      return {
        spaceList: [],
        params: {
          energy_eq: '电',
          space_eq: '',
          page: 0,
          size: 10000
        },
        tabActive: 'electric',
        eneryTypeMap: {
          water: '水',
          electric: '电',
          coolFlow: '冷量',
          gas: '燃气',
          compressionAir: '压缩空气'
        },
        imgs: [],
        sysName: '',
        factName: ''
      }
    },
    methods: {
      getSpaceList: function () {
        this.spaceList = this.$store.state.user.spaces[0].children
      },
      tabSelect (e) {
        this.tabActive = e
        this.params.energy_eq = this.eneryTypeMap[e]
        this.doLoadOperation()
      },
      factoryChange (e) {
        this.doLoadOperation()
      },
      loadImgsData: function () {
        this.doLoadOperation()
      },
      doLoadOperation: function () {
        this.imgs = []
        // 正式请求数据
        window.myapi.sys_list(this.params).then(res => {
          if (res.data.status === 200 && res.status === 200) {
            this.imgs = res.data.data.content
          } else {
            this.$Message.error(res.data.msg)
          }
        }).catch(reason => {
          this.$Notice.info(reason)
        }).finally(() => {
        })
      },
      selectChange: function (label) {
        if (label) {
          this.sysName = ''
          let params = {page: 0, size: 10000, space_eq: label}
          this.doLoadOperation(params)
        }
      },
      doSearchPic: function () {
        this.factName = ''
        let params = {page: 0, size: 10000, name_like: this.sysName}
        this.doLoadOperation(params)
      },
      jumpEdit: function (item) {
        this.$emit('tell-edit', item)
        this.imgs = []
      },
      askPic: function (picUrl) {
        window.myapi.show_pic({url: picUrl}).then(resp => {
          let image = 'data:image/png;base64,' + btoa(
            new Uint8Array(resp.data)
              .reduce((data, byte) => data + String.fromCharCode(byte), '')
          )
          return image
        }).catch(info => {
          this.$Notice.warning({
            title: '操作提示',
            desc: info
          })
        }).finally((fin) => {
        })
      }
    }
  }
</script>

<style scoped>
  ul, li {
    margin: 0;
    list-style: none;
  }

  .search-bar {
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-bottom: solid 1px #ede8e8ab;
  }

  .ivu-menu-horizontal.ivu-menu-light:after {
    background: none;
  }
  /*ggg44444*/
  .ivu-menu-item {
    font-size: 18px;
    padding: 0 5px;
    margin: 0 15px;
  }

  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
    border-bottom-width: 4px;
    color: #4e78fe;
    border-color: #4e78fe;
  }

  .ivu-menu-horizontal {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
  }

  .picture {
    width: 99%;
    padding: 15px 5px;
    margin: 0px 5px;
  }

  /*2k===0-0900*/
  @media screen and (min-width: 1921px) {
    .picture {
      height: 1190px
    }
  }

  /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
  @media screen and (max-width: 1920px) {
    .picture {
      height: 930px;
    }
  }
  .form-label {
    font-size: 14px;
    color: #363636;
    vertical-align: middle;
    margin-left: 32px;
  }

  .fatherToolBar {
    border-bottom: solid #e4e0e0 1px;
    padding: 5px 10px;
  }

  .imgCard {
    width: 320px;
    height: 200px;
    cursor: pointer;
    border: solid 1px #dad6d6;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .imgCard:hover {
    background: #f6f6f6;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.47);
  }

  .ddz2 {
    display: flex;
  }

  .ddz3 {
    flex: 1;
  }

  .ddx8 {
    flex: 0 0 50px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
  }

  .ddx9 {
    flex: 0 0 80px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
  }
</style>
